<template>
  <div>
    <!-- 全选 -->
    <label class="all-check-wrapper">
      <span class="all-check">{{ allCheckStatus }}</span>
      <input
        class="all-check-hide"
        type="checkbox"
        @change="onAllCheckChange"
      />
      全选
    </label>

    <label v-for="item in data" :key="item.cityId">
      <input type="checkbox" v-model="item.checked" />
      {{ item.value }}
    </label>
  </div>
</template>

<script>
export default {
  props:{
    data:Array
  },
  computed: {
    allCheckStatus() {
      // 列表中所有都没选 全选 >>> ''
      // 列表中所有都选中 全选 >>> 'v'
      // 其它           全选 >>> '-'
      if (this.data.every((d) => !d.checked)) {
        return "";
      }
      if (this.data.every((d) => d.checked)) {
        return "v";
      }
      return "-";
    },
  },
  methods: {
    // 切换全选
    onAllCheckChange() {
      if (this.allCheckStatus === "v") {
        this.data = this.data.map((d) => ({ ...d, checked: false }));
      } else {
        this.data = this.data.map((d) => ({ ...d, checked: true }));
      }

      this.data = this.data.map((d) => ({
        ...d,
        checked: this.allCheckStatus !== "v",
      }));
    },
  },
};
</script>

<style lang="less" scoped>
/* @r:red; */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.all-check-wrapper {
  line-height: 1em;

  .all-check {
    width: 12px;
    height: 12px;
    display: inline-block;
    outline: 1px solid blue;
    line-height: 12px;
    text-align: center;
    vertical-align: middle;
    /*   color: @r;
    background: @r; */
    .center;
    &:hover {
      outline: 1px solid red;
    }
  }
  .all-check-hide {
    display: none;
  }
}
</style>
